<template>
  <div class="huichuanshangpin">
    <top></top>
    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="lia acts" @click="go('/gongju/yundan/huichuanshangpin')">回传产品</div>
        <div class="lia"  @click="go('/gongju/yundan/huichuanjilu')">回传记录</div>
      </div>

      <el-button round @click="kai()" type="danger" style="margin-bottom: 20px;">添加办理产品</el-button>

<!--      <div class="kflex" style="margin-bottom: 20px;">
        <el-input v-model="search.name" style="width: 250px; margin-right: 20px;" placeholder="产品名称"></el-input>
        <el-input v-model="search.sku" style="width: 250px; margin-right: 20px;" placeholder="生产号码"></el-input>
        <el-button round @click="dosearch()" type="danger">搜索</el-button>
      </div> -->

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >
        <el-table-column align='center' prop='name' label="产品名称"></el-table-column>
        <el-table-column align='center' prop='sku' label="产品编码"></el-table-column>
        <el-table-column align='center' prop='created_at' label="添加时间"></el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <el-button type="text" style="margin-left: 0;" size="mini" @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

    <el-dialog title="添加回传产品" center :visible.sync="log" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div class="kflexc" style="margin-top: 20px;">
          <el-select v-model="id" style="width: 400px;" placeholder="请选择产品" filterable clearable>
            <el-option v-for="item in shangpinlists" :label="item.sku + '&' + item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </div>

    	  <span slot="footer" class="dialog-footer">
          <el-button type="info" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="xiugaigo">确定</el-button>
    	  </span>
    </el-dialog>

  </div>
</template>

<script>
  import top from '../top.vue'
  import axios from 'axios'
  export default {
    components:{
      top
    },
    name: "huichuanshangpin",
    data() {
      return {
        search:{
          page:1,
          page_size:20,
          product_name:"",
          track_number:""
        },
        list:[],
        total:0,
        log:false,
        all2:{
          name:"",
          sku:""
        },
        id:"",
        shangpinlists:[]
      }
    },
    created() {
      this.getlist()

      axios.get("/api/gth/products/list?status=100&page=1&order_by=0&page_size=1000")
      	.then( response => {
      		if (response.data.msg.code == 0) {
      			this.shangpinlists = response.data.data.data
      		}
      	})

      // axios.get('/api/gth/order-pages2?status=100&_page_size=2000')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.shangpinlists = response.data.data.data
      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   })
    },
    mounted() {

    },
    methods: {
      shanchu:function(item){
        this.$confirm('确定删除么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('/api/track_back/products/delete?sku='+item.sku)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      xiugaigo:function(){
        let obj = this.shangpinlists.filter(item => {
          return item.id == this.id
        })
        this.all2 = {
          name:obj[0].name,
          sku:obj[0].sku
        }
        axios.post('/api/track_back/products/add',this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('添加成功');
              this.log = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      kai:function(){
        this.all2 = {
          name:"",
          sku:""
        }
        this.log = true
      },

      go:function(url){
        this.$router.push(url)
      },

      dosearch: function() {
        this.search.page = 1
        this.getlist()
      },

      //翻页
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },


      //获取列表
      getlist: function() {
        axios.get('/api/track_back/products/index',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
              this.loading = false
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
</style>
